<!-- 我的足迹 -->
<template>
	<view>
		<u-navbar
			:safeAreaInsetTop="false"
			:title="footprintText"
			:fixed="false"
			:left-text="returnText"
			rightIcon="trash"
			:bgColor="bgColor"
			:autoBack="true"
			@rightClick=""
			:titleStyle="{'font-weight':700,'color':'#fff'}"
		>
		</u-navbar>
		<view class="goshop-footprint-type-wrap">
			<view class="goshop-footprint-type-box" @tap="showType = !showType">
				<view class="base-font-size">{{category}}</view>
				<view>
					<view v-if="showType" class="iconfont iconfont-up_arrow"></view>
					<view v-else class="iconfont iconfont-down_arrow"></view>
				</view>
			</view>
			<view v-if="showType" class="goshop-footprint-type-container">
				<view class="goshop-footprint-type-select-wrap">
					<u-radio-group
						v-model="category"
						:borderBottom="true"
						placement="column"
						iconPlacement="right"
						@change="groupChange"
					>
						<u-radio
							:customStyle="{marginBottom: '16px'}"
							v-for="(item, index) in typeList"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		
		<view class="u-m-t-10" v-for="(value,key) in goodDataList" :key="key">
			<view class="u-p-20">{{key}}</view>
			<view class="goshop-footprint-good-box">
					<view class="goshop-footprint-good-item" v-for="(item,index) in value" :key="index" @tap="$Router.push({ path: '/pages/common/good/info', query: { id: item.id} })">
						<view class="goshop-footprint-good-info">
							<image class="goshop-img-62" :src="item.thumbnail"></image>
							<view>{{moneyText}}{{item.price}}</view>
						</view>
					</view>
			</view>
		</view>
		<u-empty v-if="isEmpty" :text="emptyText" mode="list"></u-empty>
	</view>
</template>

<script>
	import {browseList} from '@/common/http.api.js'
	import jwt from '@/utils/jwt.js';
	export default {
		data() {
			return {
				moneyText:'',
				isEmpty:false,
				showType:false,
				bgColor: '#FB4A46',
				category:'',
				type:1,
				goodDataList:{},
				typeList: [{
						name: '',
						type: 1
					},
					{
						name: '',
						type: 2
					},
					{
						name: '',
						type: 3
					},
				],
				emptyText:'',
				returnText:'',
				footprintText:'',
				browsedText:'',
				likedText:'',
				messageText:'',
			};
		},
		onLoad(){
		  this.getList();
		},
		onShow(){
			this.refresh();
		},
		methods:{
			refresh(){
				this.moneyText = this.$t('common.money.text');
				this.emptyText = this.$t('common.empty.text');
				this.returnText = this.$t('common.return.text');
				this.footprintText = this.$t('footprint.footprint.text');
				this.category = this.$t('footprint.browsed.text');
				this.typeList[0].name = this.$t('footprint.browsed.text');
				this.typeList[1].name = this.$t('footprint.liked.text');
				this.typeList[2].name = this.$t('footprint.message.text');
			},
			rightClick() {
				console.log('rightClick');
			},
			openType() {
				
			},
			closeType() {
			  this.showType = false
			},
			groupChange(n) {
				this.showType = false;
				for (var i = 0; i < this.typeList.length; i++) {
					if(this.typeList[i].name === n){
						this.type=this.typeList[i].type; 
					}
				}
				this.getList();
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			getList(){
				const authToken = jwt.getAccessToken();
				browseList({params:{type:this.type},header: {'Authorization': authToken ? `Bearer ${authToken}` : ''}}).then(res => {
						if (res.code === 0) {
							debugger
							if(Object.keys(res.data).length === 0){
								this.isEmpty = true;
							}else{
								this.isEmpty = false;
							}
							this.goodDataList = res.data;
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
			}
		}
	}
</script>

<style lang="scss">
.goshop-footprint-type-select-wrap{
	//margin-top: 120rpx;
	padding: 20rpx;
	background-color: $goshop-color-auxiliary-one;
}
.goshop-footprint-type-wrap{
	background-color: $goshop-color-auxiliary-one;
	.goshop-footprint-type-box{
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goshop-footprint-type-container{
		
	}
}
.goshop-footprint-good-box{
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
	padding: 20rpx;
	.goshop-footprint-good-item{
		flex: 0 0 33.333333%;
		//height: 80px;
		box-sizing: border-box;
		//margin-top: 20rpx;
		.goshop-footprint-good-info{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
}
</style>
